<template>
	<view class="page-container">
		<view class="banner-container">
			<u-swiper :list="bannerList" keyName="url" @change="e => current = e.current"  :autoplay="false" circular height="80vw" imgMode="scaleToFill">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in bannerList" :key="index" :class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
			</u-swiper>
		</view>
		<view class="integralContent">
			<view class="integralAmount">
				<view class="amountNum">
					<u--text type="info" :text="integral" size="50rpx" color="#000" :bold="true"></u--text>
				</view>
				<u--image src="/static/vMall/integralIcon.png" shape="circle" height="48rpx" width="48rpx"></u--image>
			</view>
			<view class="amountUrl">
				<u-cell-group>
					<u-cell title="我的V积分" isLink url="/pages/integralDetail/integralDetail" titleStyle="color:#fff"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="goods-wrapper">
			<view class="goods-item" v-for="goods in goodsList" :key="goods.id"  @click="goodsDetail(goods.id)">
				<image class="goods-cover" mode="scaleToFill" :src="goods.cover" @error="imageError"></image>
				<view class="goods-title">{{goods.title}}</view>
				<view class="goods-price">
					<text>{{goods.price}}</text>	 
					<image class="goods-icon" mode="scaleToFill" src="/static/vMall/integralIcon.png"></image>
				</view>
				<u-button type="primary" text="立即兑换"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUser } from '@/utils/vmall.js';
	export default {
		data() {
			return {
				bannerList: [],
				current: 0,
				userInfo: {},
				integral: 0,
				goodsList: [],
				pageParams:{
					pageSize: 100,
					pageNumber: 1,
					total:1,
					totalPages:1,
				}
			}
		},
		methods: {
			onLoad() {
				getUser().then(info => {
					this.userInfo = info
					this.getUserIntegral()
				})
				this.getBanner()
				this.getGoodsList()
			},
			imageError(e) {
				console.log('imgerr',e)
			},
			goodsDetail(id) {
				uni.navigateTo({
					url: '/pages/goodsDetail/goodsDetail?goodsId='+id
				});
			},
			getBanner() {
				this.$request.get(this.$api.getBanner, {
					type: 4
				}).then(res => {
					uni.hideLoading()
					const { success, result } = res
					if (success) {
						const bannerList = result.map(item => {
							const { id, url, link } = item
							return {
								id,
								url,
								link
							}
						})
						this.bannerList = bannerList
					} else {
						this.bannerList = []
					}
				})
			},
			getGoodsList(){
				this.$request.get(this.$api.goodsList, {
					pageNo:1,
					pageSize:50
				}).then(res => {
					uni.hideLoading()
					const { success, result } = res
					if (success) {
						const { records, total, pages } = result
						const goodsList = records.map(item => {
							const { id, picUrl, name, pruductIntegral } = item
							return {
								id,
								cover:picUrl,
								title:name,
								price:pruductIntegral
							}
							
						})
						this.goodsList = goodsList
						this.pageParams.total = total
						this.pageParams.totalPages = pages
					}else{
						this.goodsList = []
						this.$appFunc.msg('获取商品失败')
					}
				})
			},
			getUserIntegral() {
				this.$request.get(this.$api.getUserById, {
					id: this.userInfo.id
				}).then(result => {
					this.integral = result.result.integral;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/variable.scss";
    .indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }
    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
	.page-container {
		padding: 0rpx 30rpx 30rpx 30rpx;
		width: 690rpx;
	}
	.banner-container {
		width:100%;
		border-radius:20rpx;
		overflow: hidden;
	}
	.integralContent{
		width:100%;
		margin:7vw auto;
		border-radius: 20rpx;
		height:14vw;
		display: flex;
		justify-content:space-between;
		align-items: center;
		box-shadow:5rpx 5rpx 24rpx rgba(0,0,0,0.3);
	}
	.integralContent .integralAmount{
		display: flex;
		align-items: center;
		margin-left:50rpx;
		/deep/ .u-text__value--info {
		    color: #000;
		}
	}
	.integralContent .integralAmount .amountNum{
		margin-right: 22rpx;
	}
	.integralContent .amountUrl{
		background: rgba(1, 87, 250, 1);
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		
	}
	.amountUrl /deep/.u-cell__body{
		padding:14rpx 30rpx;
	}
	.amountUrl /deep/ .u-icon__icon--info{
		color:#fff;
	}
	.amountUrl /deep/ .u-line {
		display: none;
	}
	.goods-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		.goods-item {
			width: 48%;
			margin-bottom: 30rpx;
			padding: 20rpx;
			box-sizing: border-box;
			box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
			.goods-cover {
				background-color: #eeeeee;
				width: 100%;
				height: 310rpx;
			}
			.goods-title, .goods-price {
				margin: 10rpx 0rpx;
			}
			.goods-title {
				height: 82rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: $my-font-base;
				line-height: 41rpx;
			}
			.goods-price {
				font-weight: bold;
				color: rgba(1, 87, 250, 1);
				text-align: right;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
			}
			.goods-icon {
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
		}
	}
</style>
